<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/uploadify/jquery.uploadify.min.js"></script>
<link rel="stylesheet" charset="utf-8" type="text/css" href="__PUBLIC__/admin/js/uploadify/uploadify.css">
<script type="text/javascript" charset="utf-8" src="__PUBLIC__/admin/js/upload.js"></script>

<style>
.bg{ background: none; border: none;}
.uploadify-button-text{ display: inline-flex; }
.uploadify-button-text button{ margin: -10px; }
.upviewer img{ height:90px; width: 120px; }
.upviewer ul{ margin:0px; padding:0px; }
.upviewer li{ margin:0px; padding:0px; position: relative; display:inline-block; width:120px; height:90px; background-position: center; background-size: contain; background-repeat: no-repeat; float: left; margin-right:10px; border:1px #ccc solid; background-color:#f0f0f0;}
.upviewer li a{ display:inline-block; position: absolute; bottom:0px; left:0px; text-align:center; width:100%; background-color:rgba(0,0,0,0.3); color:red; cursor: pointer; }
.upviewer li:hover a{ background-color:rgba(0,0,0,0.8); }
</style>
<div id="data_page" class="in_page">
	<div class="panel panel-default">
		<div class="panel-body">
			<form class="form-inline" method="get" name="keyword" id="keyword">
				<div class="form-group">
					商品分类管理
				</div>
				<div class="form-group" style="float: right;">
					<button type="button" class="btn btn-sm btn-primary" data-toggle="modal" data-target="#add" >添加板块</button>
					</div>
			</form>
		</div>
	</div>
	<table class="table table-striped table-bordered table-condensed  ">
		<thead>
			<tr><th >图标</th>
				<th >分类</th>
				<th width="50px">操作</th>
			</tr>
		</thead>
		<tbody>
			<volist name="list" id="li">
				<tr>
					 <td><img src="{$li.cate_img}"  width="50px" height="50px"/></td> 
					<td style="text-align: center; line-height: 50px;">{$li.category}</td>
					<td width="200px" style="text-align: center;">
						<button type="button" class="btn btn-success updata" did="{$li.id}"data-toggle="modal" data-target="#up" >修改</button>
					<button type="button" class="btn btn-danger del" did="{$li.id}">删除</button>
					</td>
				</tr>
			
			</volist>
		</tbody>
	</table>
</div>


<div class="modal fade" id="add" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" >添加分类</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class=" form-horizontal"  >
				<div class="form-group">
					<label for="category" class="col-sm-2 control-label">分类名称:</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" name="category" id="category" >
					</div>
				</div>
				<div class="form-group">
					 <label  class="col-sm-2 control-label">(74x74)图标:</label>
					<div class="col-sm-6">
						<input type="file" class="form-control" id="upload_list" placeholder="图标"><br />    	  
				    	<div id="view_list" class="upviewer" ></div>
					</div>
				</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" id="tianjia">添加</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal -->
</div>




<div class="modal fade" id="up" tabindex="-1" role="dialog"  aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" >修改分类</h4>
			</div>
			<div class="modal-body">
				<form id="bjy-form" class=" form-horizontal"  >
					<input type="hidden" value="" id="uid"/>
				<div class="form-group">
					<label for="category" class="col-sm-2 control-label">分类名称:</label>
					<div class="col-sm-6">
						<input type="text" class="form-control" name="category" id="cate" >
					</div>
				</div>
				
				<div class="form-group">
					 <label  class="col-sm-2 control-label">(74x74)图标:</label>
					<div class="col-sm-6">
						<input type="file" class="form-control" id="upload_show" placeholder="图标"><br />    	  
				    	<div id="view_show" class="upviewer" ></div>
					</div>
				</div>
				</form>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-success" id="save">修改</button>
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
		
	</div>
	
</div>
<div>{$page}</div>



<script language="javascript">
	$(function() {
		$('#tianjia').click(function(){
			var category=$('#category').val();
			if($("#view_list").find("img").length!=1){
	 		alert('请上传一张图标');
	 		return false;
	 		}
			if(category==""){
	 		alert('请输入分类名称');
	 		return false;
	 		}
			var cate_img=[];
		 	$("#view_list").find("img").each(function(){
		 		cate_img.push($(this).attr('src'));
		 	});
			
			$.post("{:U('Product/add_category')}",{category:category,cate_img:cate_img},function(obj){
				if(obj.s){
					location.reload();	
				}
			})
		})
		$(".updata").click(function(){
			var id=$(this).attr('did');
			var url="{:U('Product/up_category')}?id="+id;
			$.getJSON(url,function(obj){
				if(obj.s){
					$("#uid").val(obj.d.id);
					$("#cate").val(obj.d.category);
					var html='<li><img src="'+obj.d.cate_img+'"/><a d_path="'+obj.d.cate_img+'">删除</a></li>';
					$("#view_show").append(html);
					initDelFile();
				}
			})
		})
		$('#save').click(function(){
			var id=$("#uid").val();
			var category=$('#cate').val();
			if($("#view_show").find("img").length!=1){
	 		alert('请上传一张图标');
	 		return false;
	 		}
			if(category==""){
	 		alert('请输入板块名称');
	 		return false;
	 		}
			var cate_img=[];
		 	$("#view_show").find("img").each(function(){
		 		cate_img.push($(this).attr('src'));
		 	});
			
			$.post("{:U('Product/upp_category')}",{id:id,category:category,cate_img:cate_img},function(obj){
				if(obj.s){
					location.reload();	
				}
			})
		})
		
		$(".del").click(function(){
			var id=$(this).attr('did');
			var url="{:U('Product/del_category')}?id="+id;
			$.getJSON(url,function(obj){
				if(obj.s){
					alert("删除成功")
					location.reload();	
				}
			})
		})
		
	})
			
initDelFile();
	//多文件上传
initUploadify({ ID:'upload_list',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#view_list').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} 
});

initUploadify({ ID:'upload_show',url:"{:U('Upload/upload')}",success:function(obj){ 
		if(obj.s){
			$('#view_show').append('<li><img src="'+obj.d+'"/><a d_path="'+obj.d+'">删除</a></li>');
			initDelFile();
		}else{
			alert(obj.m);
		}
	} 
});
function initDelFile(){
	$('.upviewer li a').unbind('click').click(function(){
		if(!confirm('你确认删除吗?')) return false;
		var _this = $(this);
		var dpath = $(_this).attr('d_path');
		if(!dpath) return false;
		$.post('{:U('Upload/delfile')}',{filepath:dpath},function(obj){ 
			if(obj.s){ 
				$(_this).parents('li').remove();
			}else{
				alert(obj.m);
				$(_this).parents('li').remove();
			} 
		},'json');
	});
}	
</script>